<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="20">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <div>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">商品标题：</span>
            <el-input placeholder="请输入内容" v-model="goodsData.subject" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">推荐语：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">类目属性：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">支付方式：</span>
            <el-radio v-model="radio" label="1">在线支付/货到付款</el-radio>
            <el-radio v-model="radio" label="2">在线支付</el-radio>
            <el-radio v-model="radio" label="2">货到付款</el-radio>
          </el-col>
          <el-divider></el-divider>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">验证方式：</span>
            <el-radio v-model="radio" label="1">系统推荐验证</el-radio>
            <el-radio v-model="radio" label="2">没单均需验证</el-radio>
          </el-col>
          <el-divider></el-divider>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">同店商品推荐：</span>
            <el-radio v-model="radio" label="1">系统推荐</el-radio>
            <el-radio v-model="radio" label="2">手动配置</el-radio>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">图文信息：</span>
            <el-row>
              <el-col :span="12" v-for="(item, index) in goodsData.image.images" :key="index">
                <el-image style="width: 100px; height: 100px;" :src="item"></el-image>
                <el-input placeholder="请输入内容" v-model="goodsData.image.images[index]" clearable></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">商品详情：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>价格库存</span>
        </div>
        <div>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">售卖价：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">划线价：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">商品规格：</span>
            <el-collapse accordion style="width: 100%;">
              <el-collapse-item>
                <template slot="title">
                  规格筛选
                  <i class="header-icon el-icon-info"></i>
                </template>
                <div>
                  <el-checkbox-group v-model="skuChecked">
                    <el-checkbox
                      v-for="(item) in goodsData.skuInfos"
                      :key="item.specId"
                      :label="item.specId"
                    >
                      <div
                        v-for="(i, index) in item.attributes"
                        :key="index"
                        style="display: flex;"
                      >
                        {{i.attributeName}}
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 1, maxRows: 4}"
                          v-model="i.attributeValue"
                        />价格：
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 1, maxRows: 4}"
                          v-model="item.consignPrice"
                        />
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>服务与资质</span>
        </div>
        <div>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">提取方式：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">承诺发货时间：</span>
            <el-select style="width: 100%" v-model="form.sendTime" placeholder="请选择">
              <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">售后服务：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">客服电话：</span>
            <el-input placeholder="请输入内容" v-model="form.phone" clearable></el-input>
          </el-col>
          <el-col :span="24" class="show">
            <span style="white-space:nowrap;">商家备注：</span>
            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
          </el-col>
        </div>
      </el-card>
    </el-row>
    <el-button type="primary">保存&上架</el-button>
  </div>
</template>

<script>
export default {
  name: "aliToTt",
  data() {
    return {
      goodsData: {},
      skuChecked: [],
      options: ["2天", "3天", "5天", "7天", "10天", "15天"],
      form: {sendTime: "", phone: ""},
    };
  },
  methods: {
    async getData() {
      await this.$http
        .get(
          `/aliGoodsLib/get-goods/by-id/${this.$route.params.id}`
        )
        .then((res) => {
          let response = res.data.dataMap.data;
          Object.keys(response).forEach((key) => {
            if (key != "id" && key != "offerId" && key != "productId") {
              response[key] = JSON.parse(response[key]);
            }
          });
          this.goodsData = response;
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.show {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
.box-card {
  margin-top: 10px;
}
</style>
